<template>
  <div class="Box" style="height: 99.9%">
    <breadcrumb></breadcrumb>
    <div class="steps">
      <div class="step_item">
        <div class="rectangle" :class="{ active: this.current == 1 }"></div>
        <div class="triangle" :class="{ active: this.current == 1 }"></div>
        <span class="title" :class="{ active: this.current == 1 }">01.基本信息</span>
      </div>
      <div class="step_item">
        <div class="rectangle" :class="{ active: this.current == 2 }">
          <div class="triangle_bg"></div>
        </div>
        <div class="triangle" :class="{ active: this.current == 2 }"></div>

        <span class="title" :class="{ active: this.current == 2 }">02.合同信息</span>
      </div>
      <div class="step_item">
        <div class="rectangle" :class="{ active: this.current == 3 }">
          <div class="triangle_bg"></div>
        </div>
        <div class="triangle" :class="{ active: this.current == 3 }"></div>
        <span class="title" :class="{ active: this.current == 3 }">03.常跑路线</span>
      </div>
      <div class="step_item">
        <div class="rectangle" :class="{ active: this.current == 4 }">
          <div class="triangle_bg"></div>
        </div>
        <div class="triangle" :class="{ active: this.current == 4 }"></div>
        <span class="title" :class="{ active: this.current == 4 }">04.账号信息</span>
      </div>
    </div>

    <div class="main">
      <div class="main_item" v-show="this.current == 1" v-loading="loading">
        <!-- 企业信息 -->
        <div class="infoItem">
          <div class="infoTitle">
            <div class="beforeline"></div>
            <div class="tit">企业信息</div>
          </div>
          <el-form :model="enterpriseForm" :rules="enterpriseRules" status-icon ref="enterpriseForm" label-width="125px"
            class="input_form">
            <el-row :gutter="20">
              <el-col :span="16">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="供应商代码" prop="supplierCoding">
                      <el-input v-model="enterpriseForm.supplierCoding"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="企业全称" prop="supplierName">
                      <el-input v-model="enterpriseForm.supplierName"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="统一社会信用代码" prop="creditCode">
                      <el-input v-model="enterpriseForm.creditCode"></el-input> </el-form-item></el-col>
                  <el-col :span="12">
                    <el-form-item label="企业简称" prop="supplierAbbreviation">
                      <el-input v-model="enterpriseForm.supplierAbbreviation"></el-input> </el-form-item></el-col>
                  <el-col :span="12">
                    <el-form-item label="法定代表人" prop="legalPerson">
                      <el-input v-model="enterpriseForm.legalPerson"></el-input> </el-form-item></el-col>
                  <el-col :span="12"></el-col>
                  <el-col :span="12">
                    <el-form-item label="推荐部门" prop="recommendDepartment">
                      <el-input v-model="enterpriseForm.recommendDepartment"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="8">
                <el-form-item label="营业执照" prop="businessLicense">
                  <el-upload class="businessLicense_uploader" :action="url + '?ocrType=2'" :show-file-list="false"
                    v-loading="uploading" :headers="headers" :on-success="handleAvatarSuccess" :file-list="filePic"
                    :before-upload="beforeAvatarUpload">
                    <el-image v-if="enterpriseForm.businessLicense" class="businessLicensePic" :fit="'cover'"
                      :src="enterpriseForm.businessLicense">
                    </el-image>

                    <!-- :preview-src-list="[enterpriseForm.businessLicense]" -->

                    <div v-else class="uploadIconBox">
                      <div class="iconfontcolor icon-a-"></div>
                      <span class="text">上传图片</span>
                    </div>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="width: 100%">
              <el-col :span="8">
                <el-form-item label="成立时间" prop="comCreateTime">
                  <el-date-picker class="data_picker" v-model="enterpriseForm.comCreateTime" type="date"
                    @change="dateChange($event)" placeholder="选择日期" :picker-options="pickerOptions0"
                    value-format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="所属地区" prop="location">
                  <el-cascader :filter-method="filterMethod" class="zdy_cascader" ref="sysCascader" v-model="locationId"
                    :options="newCity" @change="locationChange($event)" placeholder="不限" clearable :filterable="true">
                  </el-cascader>
                </el-form-item>
              </el-col>
              <el-col :span="8"><el-form-item label="注册国家" prop="registrationCountry">
                  <el-input v-model="enterpriseForm.registrationCountry"></el-input> </el-form-item></el-col>
            </el-row>
            <el-row style="width: 100%">
              <el-col :span="16"><el-form-item label="注册地址" prop="comAddress">
                  <el-input v-model="enterpriseForm.comAddress"></el-input> </el-form-item></el-col>
              <el-col :span="8"><el-form-item label="经营范围" prop="businessScope">
                  <el-input v-model="enterpriseForm.businessScope"></el-input> </el-form-item></el-col>
              <el-col :span="16">
                <el-form-item label="办公地址" prop="officeArea">
                  <el-input v-model="enterpriseForm.officeArea"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="注册资金(万元)" prop="registeredCapital">
                  <el-input v-model="enterpriseForm.registeredCapital"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="供应商承诺书" prop="supplierCommitment">
                  <!-- action	必选参数，上传的地址 -->
                  <!-- on-preview	点击文件列表中已上传的文件时的钩子 -->
                  <!-- on-remove	文件列表移除文件时的钩子 -->
                  <!-- before-remove	删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。 -->

                  <!-- limit	最大允许上传个数 -->
                  <!-- on-exceed	文件超出个数限制时的钩子 -->
                  <!-- file-list	上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] -->
                  <el-upload class="upload" :action="url" :on-preview="handlePreview" :on-remove="handleRemove"
                    :before-remove="beforeRemove" :limit="1" :file-list="uploadFile" :on-exceed="handleExceed"
                    :on-success="onSuccess" :on-change="handleChange" :headers="headers">
                    <el-button size="small" class="uploadBtn" type="primary">选择文件</el-button>
                    <span slot="tip" class="el-upload__tip">
                      支持PDF、JPG等格式
                    </span>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="企业性质" prop="enterpriseNature">
                  <el-input v-model="enterpriseForm.enterpriseNature"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- 财务信息 -->
        <div class="infoItem">
          <div class="infoTitle">
            <div class="beforeline"></div>
            <div class="tit">财务信息</div>
          </div>
          <el-form :model="financeForm" :rules="financeRules" ref="financeForm" label-width="117px" class="input_form">
            <el-row style="width: 100%">
              <el-col :span="8">
                <el-form-item label="收款人名称" prop="payeeAccountName">
                  <el-input v-model="financeForm.payeeAccountName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="开户行" prop="openingBank">
                  <el-input v-model="financeForm.openingBank"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="开户行账号" prop="bankAccountNumber">
                  <el-input v-model="financeForm.bankAccountNumber"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="银行名称" prop="bankName">
                  <el-input v-model="financeForm.bankName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="支行名称" prop="subbranchName">
                  <el-input v-model="financeForm.subbranchName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="分行编码" prop="branchCode">
                  <el-input v-model="financeForm.branchCode"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="分行省市" prop="branchCities">
                  <el-input v-model="financeForm.branchCities"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- 联系信息 -->
        <div class="infoItem">
          <div class="infoTitle">
            <div class="beforeline"></div>
            <div class="tit">联系信息</div>
          </div>
          <el-form :model="contactForm" :rules="contactRules" ref="contactForm" label-width="117px" class="input_form">
            <el-row style="width: 100%">
              <el-col :span="8">
                <el-form-item label="公司电话" prop="companyTel">
                  <el-input v-model="contactForm.companyTel"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="负责人" prop="headName">
                  <el-input v-model="contactForm.headName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="负责人电话" prop="headTel">
                  <el-input v-model="contactForm.headTel"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="负责人邮箱" prop="headMail">
                  <el-input v-model="contactForm.headMail"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <div class="main_item" v-show="this.current == 2">
        <addContractInfo @cofime="cofime" :contractListVoList="getContractListVoList" ref="ChildContract">
        </addContractInfo>
      </div>
      <div class="main_item" v-show="this.current == 3">
        <routeInfo ref="ChildrouteInfo" :routeItemData="getRouteInfoData"></routeInfo>
      </div>
      <div class="main_item" v-show="this.current == 4">
        <titleBg :title="'账号信息'"></titleBg>
        <div class="accountBox">
          <el-form :model="accountForm" ref="accountForm" :rules="accountRules" status-icon label-width="125px"
            class="input_form">
            <el-col :span="12">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="accountForm.username" :disabled="$route.query.supplierId ? true : false"></el-input>
                <!-- :disabled="$route.query.supplierId ? true : false" -->
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="$route.query.supplierId ? false : true">
              <el-form-item label="密码" prop="password">
                <el-input v-model="accountForm.password" show-password></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="$route.query.supplierId ? false : true">
              <el-form-item label="确认密码" prop="confirmPassword">
                <el-input v-model="accountForm.confirmPassword" show-password></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="$route.query.supplierId ? false : true">
              <el-form-item label="邀请码">
                <el-input v-model="accountForm.inviter" ></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </div>
      </div>
    </div>
    <div class="nextBox">
      <div class="goBack" @click="previousStep()" v-show="this.current > 1">
        <i class="el-icon-arrow-left"></i>
        <div class="text">返回上一步</div>
      </div>
      <div class="rightItem">
        <button class="notAdopt_btn" @click="$router.back()">取消</button>
        <div class="nextBtm" @click="nextStep()">
          {{
            this.current != 4
            ? "下一步"
            : this.supplierId
              ? "编辑完成"
              : "新增完成"
          }}
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import addContractInfo from "@/views/supplierManagement/childrenAddSupplier/addContractInfo.vue";
import routeInfo from "@/views/supplierManagement/childrenAddSupplier/routeInfo.vue";
import titleVue from "@/components/titleVue.vue";
import titleBg from "@/components/titleBg.vue";
import breadcrumb from "@/components/breadcrumb.vue";
import httpApi from "@/http";
import BaseUrl from "@/http/BaseUrl";
import newCity from "@/common/newCity";

export default {
  data() {
    //统一社会信息代码校验
    let validatePass1 = (rule, value, callback) => {
      let params = {};
      if (this.$route.query.supplierId) {
        params = {
          creditCode: this.enterpriseForm.creditCode,
          supplierId: this.$route.query.supplierId,
        };
      } else if (!this.$route.query.supplierId) {
        params = {
          creditCode: this.enterpriseForm.creditCode,
        };
        // console.log("统一社会信息代码传参", params);
      }

      httpApi.supplierManagementApi.formUniqueness(params).then((res) => {
        // console.log("校验", res);
        if (res.data.code == 200) {
          callback(); //通过不传值
        } else if (res.data.code == 202) {
          callback(new Error("已存在")); //callback()传了参数字段就代表校验不通过
        }
      });
    };
    //供应商代码校验  //creditCode统一社会信用代码  supplierAbbreviation 企业简称 supplierCoding供应商代码 supplierName

    let validatePass2 = (rule, value, callback) => {
      let params = {};
      if (this.$route.query.supplierId) {
        params = {
          supplierCode: this.enterpriseForm.supplierCoding,
          supplierId: this.$route.query.supplierId,
        };
      } else if (!this.$route.query.supplierId) {
        params = {
          supplierCode: this.enterpriseForm.supplierCoding,
        };
      }

      httpApi.supplierManagementApi.formUniqueness(params).then((res) => {
        // console.log("供应商代码校验", res);
        if (res.data.code == 200) {
          callback(); //通过不传值
        } else if (res.data.code == 202) {
          callback(new Error("供应商代码已存在")); //callback()传了参数字段就代表校验不通过
        }
      });
    };
    //企业全称校验
    let validatePass3 = (rule, value, callback) => {
      let params = {};
      if (this.$route.query.supplierId) {
        params = {
          name: this.enterpriseForm.supplierName,
          supplierId: this.$route.query.supplierId,
        };
      } else if (!this.$route.query.supplierId) {
        params = {
          name: this.enterpriseForm.supplierName,
        };
      }

      httpApi.supplierManagementApi.formUniqueness(params).then((res) => {
        // console.log("企业全称校验", res);
        if (res.data.code == 200) {
          callback(); //通过不传值
        } else if (res.data.code == 202) {
          callback(new Error("企业全称已存在")); //callback()传了参数字段就代表校验不通过
        }
      });
    };
    //企业简称校验
    let validatePass4 = (rule, value, callback) => {
      let params = {};
      if (this.$route.query.supplierId) {
        params = {
          abbreviation: this.enterpriseForm.supplierAbbreviation,
          supplierId: this.$route.query.supplierId,
        };
      } else if (!this.$route.query.supplierId) {
        params = {
          abbreviation: this.enterpriseForm.supplierAbbreviation,
        };
      }

      httpApi.supplierManagementApi.formUniqueness(params).then((res) => {
        // console.log("企业简称校验", res);
        if (res.data.code == 200) {
          callback(); //通过不传值
        } else if (res.data.code == 202) {
          callback(new Error("企业简称已存在")); //callback()传了参数字段就代表校验不通过
        }
      });
    };

    //用户名校验
    let validateAccount = (rule, value, callback) => {
      let params = {};
      if (this.$route.query.supplierId) {
        callback();
        return;
      } else if (!this.$route.query.supplierId) {
        params = {
          userName: this.accountForm.username,
        };
      }
      httpApi.supplierManagementApi.accountUniqueness(params).then((res) => {
        // console.log("用户名校验", res);
        if (res.data.code == 200) {
          callback(); //通过不传值
        } else if (res.data.code == 202) {
          callback(new Error("用户名已存在")); //callback()传了参数字段就代表校验不通过
        }
      });
    };

    var validatePassword = (rule, value, callback) => {
      let rulePassword = /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*,\.])[0-9a-zA-Z!@#$%^&*,\.]{8,20}$/
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (!rulePassword.test(this.accountForm.password)){
        callback(new Error('密码至少8位、含一个数字、小写和大写的字母以及特殊字符(!@#$%^&*.)'));
      } else {
        if (this.accountForm.password !== "") {
          this.$refs.accountForm.validateField("confirmPassword");
        }
        callback();
      }
    };
    var validateConfirmPassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.accountForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      uploading: false,//是否正在上传

      addRouteForm: {}, ///路线信息表单 存储子组件获取的数据
      getContractListVoList: [], //存放合同信息回填数据 传给子组件
      getRouteInfoData: [], //存放线路信息回填数据
      // 成立时间选择范围 今天之前
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
      },
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      url: BaseUrl.UPLOADURL + "/file/upload",
      current: 1, //1 默认为第一步 基本信息,
      filePic: [], //营业执照
      uploadFile: [], //上传文件 供应商承诺书

      enterpriseForm: {
        supplierId: "",
        supplierCoding: "", //供应商代码
        supplierName: "", //企业全称
        businessLicense: "", //营业执照
        supplierAbbreviation: "", //企业简称
        legalPerson: "", //法定代表人   无字段
        registeredCapital: "", //注册资金(万元
        recommendDepartment: "", //推荐部门
        creditCode: "", //统一社会信用代码
        officeArea: "", //办公地址
        comCreateTime: "", //成立时间
        businessScope: "", //经营范围
        comAddress: "", //注册地址
        registrationCountry: "", //注册国家
        enterpriseNature: "", //企业性质
        location: "", //所属地区
        supplierCommitment: "", //供应商承诺书
      },
      /*   enterpriseForm: {
                  supplierCoding: "", //供应商代码
                  supplierName: "", //企业全称
                  businessLicense: "", //营业执照
                  supplierAbbreviation: "", //企业简称
                  legalPerson: "", //法定代表人   无字段
                  registeredCapital: "", //注册资金(万元
                  recommendDepartment: "", //推荐部门
                  creditCode: "", //统一社会信用代码
                  officeArea: "", //办公地址
                  comCreateTime: "", //成立时间
                  businessScope: "", //经营范围
                  comAddress: "", //注册地址
                  registrationCountry: "", //注册国家
                  enterpriseNature: "",//企业性质
                  location: "",//所属地区
                  supplierCommitment: ""//供应商承诺书

              }, */

      enterpriseRules: {
        supplierCoding: [
          { required: true, message: "请输入", trigger: "blur" },
          {
            pattern: /^[A-Za-z][A-Za-z]\d{5}$/,
            message: "2位字母5位数字",
            trigger: "blur",
          },
          {
            required: true,
            validator: validatePass2,
            trigger: "blur",
          },
        ],
        supplierName: [
          //企业全称
          { required: true, message: "请输入", trigger: "blur" },
          {
            required: true,
            validator: validatePass3,
            trigger: "blur",
          },

        ],
        businessLicense: [
          { required: true, message: "请上传文件", trigger: "change" },
        ],
        supplierAbbreviation: [
          { required: true, message: "请输入", trigger: "blur" },
          { required: true, validator: validatePass4, trigger: "blur" }, //企业简称
        ],
        legalPerson: [{ required: true, message: "请输入", trigger: "blur" }],
        registeredCapital: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        recommendDepartment: [
          { required: true, message: "请输入", trigger: "blur" },
        ],

        creditCode: [
          { required: true, message: "请输入", trigger: "blur" },
          {
            pattern:
              /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/,
            message: "社会信用代码格式不正确,需18位/15位老工商代码",
            trigger: "blur",
          },
          {
            required: true,
            validator: validatePass1,
            trigger: "blur",
          },
          //11421304691794718P  社会信用代码例子
        ],
        officeArea: [{ required: true, message: "请输入", trigger: "blur" }],
        businessScope: [{ required: true, message: "请输入", trigger: "blur" }],
        location: [{ required: true, message: "请输入", trigger: "change" }],
        comCreateTime: [{ required: true, message: "请输入", trigger: "blur" }],
        experienceRange: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        comAddress: [{ required: true, message: "请输入", trigger: "blur" }],
        officeAddress: [{ required: true, message: "请输入", trigger: "blur" }],
        registrationCountry: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        enterpriseNature: [
          { required: true, message: "请选择", trigger: "blur" },
        ],
      },

      financeForm: {
        payeeAccountName: "", //收款人账户
        openingBank: "", //开户行
        bankAccountNumber: "", //开户行账户
        bankName: "", //银行名称
        subbranchName: "", //支行名称
        branchCode: "", //分行编码
        branchCities: "", //分行省市
      },
      financeRules: {
        // payeeAccountName: [
        //   { required: true, message: "请输入", trigger: "blur" },
        // ],
        // openingBank: [{ required: true, message: "请输入", trigger: "blur" }],
        bankAccountNumber: [
          {
            pattern: /^\d{1,30}$/,
            message: "账户格式不正确",
            trigger: "blur",
          },
        ],
        // subbranchName: [{ required: true, message: "请输入", trigger: "blur" }],
        // bankName: [{ required: true, message: "请输入", trigger: "blur" }],
        // branchName: [{ required: true, message: "请选择", trigger: "blur" }],
        // branchCode: [{ message: "请输入", trigger: "blur" }],
        // branchCities: [{ message: "请选择省份/城市", trigger: "blur" }],
      },

      contactForm: {
        companyTel: "", //公司电话
        headName: "", //负责人姓名
        headTel: "", //负责人电话
        headMail: "", //负责人邮箱
      },
      contactRules: {
        //companyTel: [{ message: "请输入", trigger: "change" }],
        headName: [{ required: true, message: "请输入", trigger: "blur" }],
        headTel: [
          { required: true, message: "请输入", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "手机号格式不正确",
            trigger: "blur",
          },
        ],
        headMail: [
          // { required: true, message: "请输入", trigger: "blur" },
          // 只允许英文字母、数字、下划线、英文句号、以及中划线组成
          {
            pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/,
            message: "邮箱格式不正确",
            trigger: "blur",
          },
        ],
      },
      addContractForm: [],
      accountForm: {
        username: "", //账号
        password: "", //密码
        confirmPassword: "", //确认密码
        inviter:'',//邀请码
      },
      accountRules: {
        username: [
          {
            required: this.$route.query.supplierId ? false : true,
            message: "请输入",
            trigger: "blur",
          },
          { validator: validateAccount, trigger: "blur" },
        ],
        password: [
          {
            required: this.$route.query.supplierId ? false : true,
            message: "请输入",
            trigger: "blur",
          },
          { validator: validatePassword, trigger: "blur" },
        ],
        confirmPassword: [
          {
            required: this.$route.query.supplierId ? false : true,
            message: "请输入",
            trigger: "blur",
          },
          { validator: validateConfirmPassword, trigger: "blur" },
        ],
      },

      // /*  */
      supplierInfoForm: {}, //存放总表单数据
      locationId: [], //所属地区 value
      newCity: [],
      isTrueBasicInfo: false,

      isTrueContract: false,
      isTrueAccount: false,
      supplierId: this.$route.query.supplierId,

      loading: false,
      permissions: {}
    };
  },

  methods: {
    cofime(contractArray) {
      //res 为true代表验证通过
      this.supplierInfoForm.contractIds = []; //赋值且清空数组
      // console.log("父组件接受子组件的数据", contractArray);
      this.supplierInfoForm.contractIds = contractArray; // 存放 合同信息数组 数据
      // console.log("第二步完成后总form的数据", this.supplierInfoForm);
      // console.log("长度", this.supplierInfoForm.contractIds.length);
      if (this.supplierInfoForm.contractIds.length != 0) {
        this.isTrueContract = true;
      } else {
        this.$message.error("至少一条合同信息");
        this.isTrueContract = false;
      }
    },
    // 图片上传成功后
    handleAvatarSuccess(res, file) {
      console.log(res, '上传成功后', file);

      switch (res.code) {
        case 200:
          this.enterpriseForm.businessLicense = res.data.url;
          this.$refs["enterpriseForm"].clearValidate("businessLicense");
          var date = res.data.jsonObject;
          if (date != null) {
            this.enterpriseForm.supplierName = date.companyName;
            this.enterpriseForm.creditCode = date.creditCode;
            this.enterpriseForm.supplierAbbreviation = date.companyName;
            this.enterpriseForm.legalPerson = date.legalPerson;
            this.enterpriseForm.comCreateTime = date.RegistrationDate.replace('年', '-').replace('月', '-').replace('日', '-');
            this.enterpriseForm.comAddress = date.businessAddress;
            this.enterpriseForm.businessScope = date.businessScope;
            this.enterpriseForm.officeArea = date.businessAddress;
            this.enterpriseForm.registeredCapital = date.registeredCapital.split("万")[0];
          }
          this.uploading = false
          // console.log(this.enterpriseForm.businessLicense);
          break;
        case 500:
          this.$message({
            type: "error",
            message: "上传图片失败,500服务器错误",
          });
          this.uploading = false

          break;
      }



    },

    // 图片上传之前判断图片格式及大小

    beforeAvatarUpload(file) {
      if (this.uploading) {
        this.message.warning('正在上传中')
        return
      }
      this.uploading = true



      const isJPG = file.type === "image/jpeg";
      const isPng = file.type === "image/png";
      const isJpeg = file.type === "image/jpeg";

      const isLt5M = file.size / 1024 / 1024 < 5;

      if (!isJPG && !isPng && !isJpeg) {
        this.$message.error("上传营业执照图片只能是 JPG/png/jpeg 格式!");
        return false;
      }
      if (!isLt5M) {
        this.$message.error("上传营业执照图片不能超过 5MB!");
        return false;
      }
      // console.log("条件", (isJPG || isPng || isJpeg) && isLt2M);
      if (!((isJPG || isPng || isJpeg) && isLt5M)) {
        this.uploading = false
      }

      return (isJPG || isPng || isJpeg) && isLt5M;
    },

    // 验证 //合并基本信息的的表单 并验证
    yanzhen() {
      if (this.loading) {
        return
      }
      this.loading = true
      this.$refs["enterpriseForm"].validate((valid) => {
        if (valid) {
          this.$refs["financeForm"].validate((valid) => {
            if (valid) {
              this.$refs["contactForm"].validate((valid) => {
                if (valid) {
                  // 3个valid都为true 合并表单数据
                  let obj1 = JSON.parse(JSON.stringify(this.enterpriseForm));
                  let obj2 = JSON.parse(JSON.stringify(this.financeForm));
                  let obj3 = JSON.parse(JSON.stringify(this.contactForm));
                  Object.assign(this.supplierInfoForm, obj1, obj2, obj3);
                  // console.log("总的form", this.supplierInfoForm);
                  this.$message.success("基本信息填写成功");
                  this.isTrueBasicInfo = true;
                  this.loading = false
                  this.current += 1;
                } else {
                  this.$message.error("请填写完整信息");
                  this.loading = false
                  return false;
                }
              });
            } else {
              this.$message.error("请填写完整信息");
              this.loading = false
              return false;
            }
          });
        } else {
          this.$message.error("请填写完整信息");
          this.loading = false
          return false;
        }
      });
    },
    nextStep() {
      // 基本信息校验
      if (this.current == 1) {
        // 基本信息_企业信息
        this.yanzhen();
        if (this.$route.query.supplierId) {
          // console.log("查看子组件的方法", this.$refs.ChildContract);
          this.$refs.ChildContract.getBackfilling(); //调用子组件方法  回填合同表格
        }
      } else if (this.current == 2) {
        // console.log("查看子组件的方法", this.$refs.ChildrouteInfo);
        this.$refs.ChildrouteInfo.getRouteItemData(); //调用子组件方法

        //合同信息校验
        if (this.isTrueContract) {
          this.current += 1;
        }else{
          this.message.error('请填写合同信息')
        }
      } else if (this.current == 3) {
        //线路信息

        this.supplierInfoForm.lineIds = [];
        let itemArr = this.$refs["ChildrouteInfo"].addRouteForm.routeItem;

        if (itemArr.length > 0) {
          itemArr.forEach((item, i) => {
            if (item.lineName) {
              this.supplierInfoForm.lineIds.push({
                lineName: item.lineName,
                lineAddressDtos: [],
              });
              item.departurePlaceTable.forEach((mth, k) => {
                this.supplierInfoForm.lineIds[i].lineAddressDtos.push(mth);
              });
              item.destinationPlaceTable.forEach((mths, z) => {
                this.supplierInfoForm.lineIds[i].lineAddressDtos.push(mths);
              });
            }
          });
          // console.log("线路数据格式转换后!", this.cargoOwnerInfo.lineIds);
          if (this.supplierInfoForm.lineIds.length > 0) {
            this.supplierInfoForm.lineIds.forEach((item) => {
              item.lineAddressDtos.forEach((term, i) => {

                for (let key in term) {
                  //key为在遍历对象中的每一个属性的属性名  term[key]为在遍历对象中的每一个key属性名对应的属性值 term为被遍历的对象
                  delete term.name;
                  delete term.remark;
                  delete term.tags;
                  delete term.updateBy;
              

                  console.log(term[key]);
                  if (term[key] == "") {
                    // console.log("属性" + key + "为" + term[key]);
                    this.isTrueRoute = false;
                    console.log(term[key]);
                    this.$message.error("请填写线路完整信息");
                    return;
                  } else {
                    this.isTrueRoute = true;
                  }
                }
              });
            });
          } else {
            this.isTrueRoute = true;
          }
        } else {
          this.isTrueRoute = true;
        }
        // console.log(this.supplierInfoForm);
        if (this.isTrueRoute) {
          this.current += 1;
        }
      } else if (this.current == 4) {
        this.$refs["accountForm"].validate((valid) => {
          if (valid) {
            // console.log("this指向", this.supplierInfoForm);

            this.supplierInfoForm.username = this.accountForm.username;
            this.supplierInfoForm.password = this.accountForm.password;
            this.supplierInfoForm.confirmPassword = this.accountForm.confirmPassword;
            this.supplierInfoForm.inviter=this.accountForm.inviter
            if(this.supplierInfoForm.inviter.length==11){
              this.supplierInfoForm.inviterType='1'
            }else{
              this.supplierInfoForm.inviterType='0'
            }
            // console.log("总表单数据第四步", this.supplierInfoForm);

            if (this.$route.query.supplierId != undefined) {
              this.supplierInfoForm.supplierId = this.$route.query.supplierId;
              httpApi.supplierManagementApi.emitSupplier(this.supplierInfoForm).then((res) => {
                // console.log("编辑结果", res);
                if (res.data.code == 200) {
                  this.$message.success("编辑成功");
                  this.$router.go(-1);
                }
              });
            } else if (this.$route.query.supplierId == undefined) {
              httpApi.supplierManagementApi.addSupplier(this.supplierInfoForm).then((res) => {
                // console.log("新增结果", res);
                if (res.data.code == 200) {
                  this.$message.success("新增成功");
                  this.$router.go(-1);
                }
              });
            }
          } else {
            this.$message.error("请填写完数据");
            return false;
          }
        });
      }
    },
    //返回上一步
    previousStep() {
      this.current = this.current - 1;
    },
    // 	文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      this.uploadFile = [];
      // console.log("删除成功的钩子响应", file, fileList);
    },
    //    <!-- on-preview	点击文件列表中已上传的文件时的钩子 -->
    handlePreview(file) {
      // console.log(file, "点击文件列表中已上传的文件时的钩子");
      window.open(this.uploadFile[0].url);
    },
    //      <!-- on-exceed	文件超出个数限制时的钩子 -->
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
        } 个文件`
      );
    },
    // before-remove	删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 文件上传成功时的钩子
    onSuccess(response, file, fileList) {
      // console.log("供应商承诺书文件文件响应", response);

      this.enterpriseForm.supplierCommitment = response.data.url;
      this.uploadFile.push({
        name: response.data.name,
        url: response.data.url,
      });
      // console.log("213123123", this.uploadFile);

      this.$refs["enterpriseForm"].clearValidate("supplierCommitment");

      // console.log("供应商承诺书文件信息",this.enterpriseForm.supplierCommitment);
    },
    handleChange(file, fileList) { },

    // 地区选择
    locationChange(val) {
      // console.log(val);
      // 把得到的数组转为字符传
      if (val.length != 0) {
        this.location = val;
        // getNodeByValue	获取选中的节点信息

        // this.$refs.sysCascader.getCheckedNodes()[0]这方法手动点击级联选择器 可以获取节点信息, 搜索选取的 拿不到节点信息

        var labelArr =
          this.$refs["sysCascader"].panel.getNodeByValue(val).pathLabels;

        //// console.log('getNodeByValue',labelArr);

        let idArr = this.$refs["sysCascader"].panel.getNodeByValue(val).path;
        this.enterpriseForm.locationId = idArr.join(",");
        this.enterpriseForm.location = labelArr.join("/");

        // console.log("loaction", this.enterpriseForm.location);
      } else if (val.length == 0) {
        this.enterpriseForm.location = "";
        // // console.log('清空',this.enterpriseForm.location);
      }
    },
    // 搜索地区时,
    filterMethod(node, keyword) {
      if (node.text.indexOf(keyword) != -1) {
        // console.log("node", node);
        return node.label;
      }
      //// console.log('keyword',keyword);
    },
    dateChange(val) {
      // console.log(val);
    },
    // 编辑 获取货主数据回填表单
    getEditData() {
      // console.log(this.$route.query.supplierId);
      let params = {
        supplierId: this.$route.query.supplierId,
      };
      httpApi.supplierManagementApi
        .getEmitSupplierDetails(params)
        .then((res) => {
          // console.log("供应商全部数据", res);
          /*              supplierCoding: "AD98741", //供应商代码
                                supplierName: "绿安科技有限公司", //企业全称
                                businessLicense: "", //营业执照
                                supplierAbbreviation: "绿安科技", //企业简称
                                legalPerson: "韩某", //法定代表人   无字段
                                registeredCapital: "100", //注册资金(万元
                                recommendDepartment: "运营部", //推荐部门
                                creditCode: "123456789087456123", //统一社会信用代码
                                officeArea: "重庆市渝北区红旗河沟", //办公地址
                                comCreateTime: "", //成立时间
                                businessScope: "重庆", //经营范围
                                comAddress: "重庆市渝北区红旗河沟", //注册地址
                                registrationCountry: "中国", //注册国家
                                enterpriseNature: "私营企业",//企业性质
                                location: "",//所属地区
                                supplierCommitment: ""//供应商承诺书 */

          this.enterpriseForm = {
            supplierCoding: res.data.data.supplierCoding, //供应商代码
            supplierName: res.data.data.supplierName, //企业全称
            businessLicense: res.data.data.businessLicense, //营业执照
            supplierAbbreviation: res.data.data.supplierAbbreviation, //企业简称
            legalPerson: res.data.data.legalPerson, //法定代表人
            registeredCapital: res.data.data.registeredCapital, //注册资金(万元
            recommendDepartment: res.data.data.recommendDepartment, //推荐部门
            creditCode: res.data.data.creditCode, //统一社会信用代码
            officeArea: res.data.data.officeArea, //办公地址
            comCreateTime: res.data.data.comCreateTime, //成立时间
            businessScope: res.data.data.businessScope, //经营范围
            comAddress: res.data.data.comAddress, //注册地址
            registrationCountry: res.data.data.registrationCountry, //注册国家
            location: res.data.data.location,
            enterpriseNature: res.data.data.enterpriseNature,
            locationId: res.data.data.locationId,
            supplierCommitment: res.data.data.supplierCommitment, //供应商承诺书
          };
          //supplierCoding
          // console.log(this.enterpriseForm);
          this.uploadFile.push({
            name: "附件",
            url: res.data.data.supplierCommitment,
          });

          this.locationId = res.data.data.locationId.split(","); //单独存数组 所数地区

          this.financeForm = {
            payeeAccountName: res.data.data.payeeAccountName, //收款人账户
            openingBank: res.data.data.openingBank, //开户行
            bankAccountNumber: res.data.data.bankAccountNumber, //开户行账户
            bankName: res.data.data.bankName, //银行名称
            subbranchName: res.data.data.subbranchName, //支行名称
            branchCode: res.data.data.branchCode, //分行编码
            branchCities: res.data.data.branchCities, //分行省市
          };
          this.contactForm = {
            companyTel: res.data.data.companyTel, //公司电话
            headName: res.data.data.headName, //负责人姓名
            headTel: res.data.data.headTel, //负责人电话
            headMail: res.data.data.headMail, //负责人邮箱
          };

          this.accountForm = {
            username: res.data.data.username, //账号
            password: res.data.data.password, //密码
            confirmPassword: res.data.data.confirmPassword, //确认密码
          };

          this.getContractListVoList = res.data.data.contractIds;
          // console.log("合同信息回填数据", this.getContractListVoList);
          //如果有合同信息,在修改之前,将历史合同信息回填到总表单  //以防止用户在该步骤 未修改任何数据直接下一步
          if (this.getContractListVoList.length != 0) {
            this.supplierInfoForm.contractIds = res.data.data.contractIds;
            // console.log("在修改之前,将历史合同信息回填到总表单",this.contractIds);
            this.isTrueContract = true;
          } else if (this.getContractListVoList.length == 0) {
            this.isTrueContract = false;
          }

          res.data.data.lineIds;
          this.getRouteInfoData = res.data.data.lineIds;

          //如果有历史信息 在修改之前,将历史合同信息回填总表单    //以防止用户在该步骤 未修改任何数据直接创建提交
          if (res.data.data.lineIds != 0) {
            this.supplierInfoForm.lineIds = res.data.data.lineIds;
            // console.log("在修改之前,将历史路线信息回填总表单", this.lineIds);
            this.isTrueContract = true;
          } else if (this.getContractListVoList.length == 0) {
            this.isTrueContract = false;
          }
        });
    },
  },
  mounted() {
    this.newCity = newCity; //存储城市数组
    if (this.$route.query.supplierId) {
      this.getEditData();
    }
  },
  components: {
    breadcrumb,
    addContractInfo,
    routeInfo,
    titleVue,
    titleBg,
  },
};
</script>

<style lang="scss" scoped>
.steps {
  height: 48.2px;
  width: 100%;
  background-color: #fff;
  display: flex;
  margin-bottom: 16px;

  >.step_item {
    width: calc(100% / 3);
    height: 48.2px;
    display: flex;
    position: relative;
    overflow: hidden;
    background-color: #f5f5f5;

    .rectangle {
      flex: 1;
      background-color: #fff;
      height: 48.2px;
      position: relative;
      z-index: 60;
      cursor: pointer;

      &.active {
        background-color: #1890ff;
      }

      >.triangle_bg {
        height: 39.6px;
        width: 39.6px;
        transform: rotate(45deg);
        display: inline-block;
        background-color: #f5f5f5;
        top: 4px;
        position: absolute;
        left: -22px;
      }
    }

    .triangle {
  
      height: 39.6px;
      width: 39.6px;
      transform: rotate(45deg);
      display: inline-block;
      background-color: #fff;

      position: relative;
      top: 4px;
      right: 16px;
      z-index: 100;

      &.active {
        background-color: #1890ff;
      }
    }

    .title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #262626;
      font-size: 12px;
      z-index: 200;
      cursor: pointer;

      &.active {
        color: #fff;
      }
    }
  }
}

.main {
  width: 100%;
  height: calc(100vh - 235px);
  overflow-y: scroll;

  // 验证反馈图标颜色
  ::v-deep .el-form-item.is-error .el-input__validateIcon {
    color: #f56c6c;
  }

  ::v-deep .el-input__validateIcon {
    color: #1890ff;
  }

  .main_item {
    background-color: #fff;
    padding: 28px 24px 0px;

    .accountBox {
      background-color: #fff;
      height: calc(100vh - 345px);
    }

    .businessLicensePic {
      width: 100%;
      height: 143px;
    }

    .infoItem {

      // 上传文件
      .upload {
        .uploadBtn {
          width: 80px;
          height: 32px;
          background-color: #1890ff;
          font-size: 12px;
          color: #fff;
          cursor: pointer;
          border-radius: 4px;
          transition: 0.2s;
          margin-right: 12px;
          margin-bottom: 8px;

          &:hover {
            opacity: 0.8;
          }
        }

        .el-upload__tip {
          color: #cccccc;
          font-size: 12px;
        }

        ::v-deep .el-upload-list {
          background-color: #eef3f9;
        }
      }

      .infoTitle {
        background-color: #f8f8f8;
        height: 40px;
        display: flex;
        align-items: center;

        .beforeline {
          height: 14px;
          width: 3px;
          display: inline-block;
          background-color: #1890ff;
          margin-left: 12px;
          margin-right: 6px;
        }

        >.tit {
          color: #262626;
          font-size: 13px;
          font-weight: bold;
        }
      }

      .input_form {
        //height: 396px;
        padding: 28px 0 56px 0px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        ::v-deep .el-form-item__label {
          line-height: 32px;
          font-size: 12px;
          color: #262626;
          padding-top: 4px;
        }

        ::v-deep .el-input__inner {
          line-height: 32px;
          height: 32px;
        }

        .businessLicense_uploader {
          flex: 1;
          max-width: 240px;
          height: 144px;
          background-color: #f5f5f5;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;

          ::v-deep .el-upload {
            width: 100%;
            height: 100%;
          }

          .uploadIconBox {
            flex: 1;
            max-width: 240px;
            height: 144px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .icon-a- {
              font-size: 28.7px;
            }

            >.text {
              color: #1890ff;
              font-size: 12px;
              line-height: 0px;
              margin-top: 10px;
            }
          }
        }
      }
    }
  }
}

.Box {
  position: relative;
  width: 100%;
  height: 100%;
}

.nextBox {
  border-top: 1px solid #eee;
  height: 60px;
  width: calc(100% + 32px);
  background-color: #fff;
  position: absolute;
  bottom: -16px;
  left: -16px;
  display: flex;
  justify-content: space-between;
  align-items: center;




  .goBack {
    display: flex;
    align-items: center;
    margin-left: 16px;
    cursor: pointer;
    transition: 0.2s;

    &:hover {
      opacity: 0.8;
    }

    >.el-icon-arrow-left {
      font-size: 13px;
      color: #1890ff;
    }

    >.text {
      color: #1890ff;
      font-size: 12px;
    }
  }

  .rightItem {
    margin-left: auto;
    display: flex;
    align-items: center;

    .notAdopt_btn {
      border-radius: 4px;
      border: 1px solid #d9d9d9;
      height: 36px;
      width: 80px;
      color: #262626;
      font-size: 12px;
      background-color: #fff;
      margin-right: 14px;
      cursor: pointer;
      transition: 0.2s;

      &:hover {
        opacity: 0.8;
        color: #1890ff;
        transition: 0.2s;
        border: 1px solid #1890ff;
      }
    }



    .nextBtm {
      background-color: #1890ff;
      color: #fff;
      font-size: 14px;
      line-height: 60px;
      text-align: center;
      width: 160px;
      height: 60px;
      margin-left: auto;
      cursor: pointer;
      transition: 0.2s;
      position: relative;





      &:hover {
        opacity: 0.8;
      }
    }

  }


}

.data_picker {
  width: calc(100% - 15px) !important;
}

.zdy_cascader {
  width: calc(100% - 5px) !important;
}
</style>
